<script setup lang="ts">

import img from "@/assets/img";

import {EpLocation} from "vue-icons-plus/ep";
import {IoCaretDown} from "vue-icons-plus/io";
import {BsFileEarmarkText, BsPerson,BsFilterLeft,BsStarFill,BsStarHalf} from "vue-icons-plus/bs";
import {RiCompassDiscoverFill} from "vue-icons-plus/ri";
import {AiOutlineHome,AiOutlineSearch} from "vue-icons-plus/ai";

const router = useRouter()
function businesslistings() {
  router.push({ name: 'businesslistings' });
}
function businessinformation() {
  router.push({ name: 'businessinformation' });
}
function myorder(){
  router.push('/myorders');
}
</script>

<template>
<div class=" h-full w-full">
    <header class="w-full h-12vw bg-#0097ff flex items-center pos-fixed">
      <EpLocation class="ml-3vw color-white "></EpLocation>
      <p class="text-4vw font-700 color-#fff ml-1 mr-1  select-none justify-center items-center">云南大学</p>
      <IoCaretDown class="w-3.5vw h-3.5vw color-white "></IoCaretDown>
    </header>
    <div class="w-full h-13vw bg-#0097ff flex justify-center items-center pos-fixed top-12vw">
        <div class="w-90% h-9vw rounded-2px bg-white text-3.5vw  color-#AEAEAE select-none flex justify-center items-center" style="font-family: SimSun,serif">
          <AiOutlineSearch class="w-5 h-5 mr-1"></AiOutlineSearch>
          <p>搜索饿了吗商家、商品名称</p>
        </div>
    </div>
  <div class="food-type w-full h-48vw pt-30vw flex flex-wrap justify-around items-center">
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl01">
      <p>美食</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl02">
      <p>早餐</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl03">
      <p>跑腿代购</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl04">
      <p>汉堡披萨</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl05">
      <p>甜品饮品</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl06">
      <p>速食简餐</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl07">
      <p>地方小吃</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl08">
      <p>米粉面馆</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl09">
      <p>包子粥铺</p>
    </div>
    <div class="item" @click="businesslistings">
      <img :src="img.dcfl10">
      <p>炸鸡炸串</p>
    </div>
  </div>
  <div class="banner w-95% h-29vw m-auto box-border mt-30vw pt-2vw pl-6vw bg-cover bg-no-repeat select-none" >
    <h3 class="text-4.2vw mb-1.2vw">品质套餐</h3>
    <p class="text-3.4vw mb-2.4vw color-#666">搭配齐全吃得好</p>
    <a @click="businesslistings" class="text-3vw color-#C79060 font-700 cursor-pointer">立即抢购 &gt;</a>
  </div>
  <div class="w-95%  h-11.5vw m-auto bg-#FEEDC1 mt-1.3vw border-radius-2px color-#644F1B flex justify-between items-center">
    <div class="left flex items-center ml-4vw select-none">
      <img :src="img.super_member" class="w-6vw h-6vw mr-2vw mb-1.5">
      <h3 class="mr-2vw text-3.5vw">超级会员</h3>
      <p class="text-3vw mt-0.5">&#8226; 每月享超值权益</p>
    </div>
    <div class="text-3vw mr-4vw mt-0.5 cursor-pointer">立即开通 &gt;</div>
  </div>
  <div class="w-full h-14vw flex justify-center items-center">
    <div class="w-6vw h-0.2vw bg-#888"></div>
    <p class="text-4vw m-4">推荐商家</p>
    <div class="w-6vw h-0.2vw bg-#888"></div>
  </div>
  <ul class="w-full h-5vw mb-5vw flex justify-around items-center">
    <li class="text-3,5vw color-#555">综合排序</li>
    <IoCaretDown class="w-2.5vw h-2.5vw color-#555 ml--14"></IoCaretDown>
    <li class="text-3,5vw color-#555">距离最近</li>
    <li class="text-3,5vw color-#555">销量最高</li>
    <li class="text-3,5vw color-#555">筛选</li>
    <BsFilterLeft class="w-3.5vw h-3.5vw color-#555 ml--14"></BsFilterLeft>
  </ul>
  <ul class="business w-full pb-14vw">
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj01">
      <div class="business-info">
        <div class="business-info-h">
          <h3>万家饺子(软件园E18店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>各种饺子</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj02">
      <div class="business-info">
        <div class="business-info-h">
          <h3>小锅饭豆腐馆(全运店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>各种类的豆腐</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon" style="background-color: #F1884F;">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj03">
      <div class="business-info">
        <div class="business-info-h">
          <h3>麦当劳麦乐送(全运路店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>炸鸡汉堡</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj04">
      <div class="business-info">
        <div class="business-info-h">
          <h3>米村拌饭(浑南店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>各式拌饭</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj05">
      <div class="business-info">
        <div class="business-info-h">
          <h3>申记串道(中海康城店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>各种串串</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj06">
      <div class="business-info">
        <div class="business-info-h">
          <h3>半亩良田排骨米饭</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>排骨+饭</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj07">
      <div class="business-info">
        <div class="business-info-h">
          <h3>茶兮鲜果饮品(国际软件园店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>奶茶、果茶</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj08">
      <div class="business-info">
        <div class="business-info-h">
          <h3>唯一水果捞(软件园E18店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>水果捞</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品5元起</p>
          </div>
        </div>
      </div>
    </li>
    <li @click ="businessinformation" class="cursor-pointer">
      <img :src="img.sj09">
      <div class="business-info">
        <div class="business-info-h">
          <h3>满园春饼(全运路店)</h3>
          <div class="business-info-like">&#8226;</div>
        </div>
        <div class="business-info-star">
          <div class="business-info-star-left">
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarFill class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarFill>
            <BsStarHalf class="color-#FEC80E m-r=0.5vw mb-0.5 w-4.5 h-4.5"></BsStarHalf>
            <p>4.9 月售345单</p>
          </div>
          <div class="business-info-star-right">
            蜂鸟专送
          </div>
        </div>
        <div class="business-info-delivery">
          <p>&#165;15起送 | &#165;3配送</p>
          <p>3.22km | 30分钟</p>
        </div>
        <div class="business-info-explain">
          <div>春饼</div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">新</div>
            <p>饿了么新用户首单立减9元</p>
          </div>
          <div class="business-info-promotion-right">
            <p>2个活动</p>
            <i class="fa fa-caret-down"></i>
          </div>
        </div>
        <div class="business-info-promotion">
          <div class="business-info-promotion-left">
            <div class="business-info-promotion-left-icon">特</div>
            <p>特价商品4元起</p>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <ul class="footer w-full h-14vw flex items-center justify-around pos-fixed left-0 bottom-0 border-solid border-t-1px border-#DDD">
      <li>
        <AiOutlineHome class="color-#0097ff"></AiOutlineHome>
        <p class="color-#0097ff">首页</p>
      </li>
      <li>
        <RiCompassDiscoverFill></RiCompassDiscoverFill>
        <p>发现</p>
      </li>
      <li @click="myorder">
        <BsFileEarmarkText></BsFileEarmarkText>
        <p>订单</p>
      </li>
      <li>
        <BsPerson></BsPerson>
        <p>我的</p>
      </li>
    </ul>
</div>
</template>

<style scoped>
.food-type .item{
  width: 18vw;
  height: 20vw;

  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;

  user-select: none;
  cursor: pointer;
}
.food-type .item img{
  width: 12vw;
  height: 12vw;
}
.food-type .item p{
  font-size: 3.2vw;
  color: #666;
}
.banner{
  background-image: url(../assets/img/index_banner.png);
}

.business li{
  width:  100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;
  border-bottom: solid 1px #DDD;
  display: flex;
}
.business li img{
  width: 18vw;
  height: 18vw;
}
.business li .business-info{
  width: 100%;
  box-sizing: border-box;
  padding-left: 3vw;
}
.business li .business-info .business-info-h{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
}
.business li .business-info .business-info-h h3{
  font-size: 4vw;
  color: #333;
}
.business li .business-info .business-info-h .business-info-like{
  width: 1.6vw;
  height: 3.4vw;
  background-color: #666;
  color: #FFF;
  font-size: 4vw;
  margin-right: 4vw;

  display: flex;
  justify-content: center;
  align-items: center;
}
.business li .business-info .business-info-star{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  font-size: 3.1vw;
}
.business li .business-info .business-info-star .business-info-star-left{
  display: flex;
  align-items: center;
}
.business li .business-info .business-info-star .business-info-star-left p{
  color: #666;
  margin-left: 1vw;
}
.business li .business-info .business-info-star .business-info-star-right{
  background-color: #0097FF;
  color: #fff;
  font-size: 2.4vw;
  border-radius: 2px;
  padding: 0 0.6vw;
}
.business li .business-info .business-info-delivery{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;

  color: #666;
  font-size: 3.1vw;
}
.business li .business-info .business-info-explain{
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}
.business li .business-info .business-info-explain div{
  border: solid 1px #DDD;
  font-size: 2.8vw;
  color: #666;
  border-radius: 3px;
  padding: 0 0.1vw;
}
.business li .business-info .business-info-promotion{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8vw;
}
.business li .business-info .business-info-promotion .business-info-promotion-left{
  display: flex;
  align-items: center;
}
.business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-icon{
  width: 4vw;
  height: 4vw;
  background-color: #70BC46;
  border-radius: 3px;
  font-size: 3vw;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
}
.business li .business-info .business-info-promotion .business-info-promotion-left p{
  color: #666;
  font-size: 3vw;
  margin-left: 2vw;

}
.business li .business-info .business-info-promotion .business-info-promotion-right{
  display: flex;
  align-items: center;
  font-size: 2.5vw;
  color: #999;
}
.business li .business-info .business-info-promotion .business-info-promotion-right p{
  margin-right: 2vw;
}

.footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}
.footer li p{
  font-size: 2.8vw;
}
.footer li i{
  font-size: 5vw;
}
</style>
